@use '@angular/material' as mat;
// @import './theming';

// Background palette for dark themes.
mat.$dark-theme-background-palette: (
  status-bar: black,
  app-bar: map_get(mat.$grey-palette, 900),
  background: #1b1b38,
  hover: rgba(white, 0.04),
  // TODO(kara): check style with Material Design UX
  card: #323259,
  dialog: #323259,
  disabled-button: rgba(white, 0.12),
  raised-button: map-get(mat.$grey-palette, 800),
  focused-button: $light-focused,
  selected-button: map_get(mat.$grey-palette, 900),
  selected-disabled-button: map_get(mat.$grey-palette, 800),
  disabled-button-toggle: black,
  unselected-chip: map_get(mat.$grey-palette, 700),
  disabled-list-option: black,
  tooltip: map_get(mat.$grey-palette, 700),
  surface: rgba(50, 50, 89, 0.875)
);

// Define an alternate dark theme.
$cosmic-primary: mat.define-palette(mat.$deep-purple-palette);
$cosmic-accent: mat.define-palette(mat.$amber-palette, A200, A100, A400);
$cosmic-warn: mat.define-palette(mat.$deep-orange-palette);
$cosmic-theme: mat.define-dark-theme(
  (
    color: (
      primary: $cosmic-primary,
      accent: $cosmic-accent,
      warn: $cosmic-warn,
    ),
  )
);

// In case a theme object has been passed instead of a configuration for
// the color system, extract the color config from the theme object.
// $config: if(_mat-is-theme-object($cosmic-theme),
//     mat.get-color-config($cosmic-theme), $cosmic-theme);
// for Material Components theming
.ngm-theme-cosmic {
  // @include mat.all-component-colors($cosmic-theme);
  @include ngm-mat-theme((
    color: mat.get-color-config($cosmic-theme),
    typography: null,
    density: null,
  ));
}
